<template>
	<el-row :gutter="16" class="library_block_list">
		<el-col :span="responsive" v-for="(item, index) in data" :key="index">
			<div class="item">
				<div class="img" @click="handleLookLibrary(item)">
					<img class="cover" :src="libraryCover(item)" :alt="item.name" />
					<span>{{ item.name }}</span>
					<p class="avatar">
						<img :src="avatarImage(item)" :alt="item.name" />
						{{ item.createName }}
					</p>
				</div>
				<div class="bot">
					<span class="iconfont icon-general-log">{{ item.diskCount }}</span>
					<el-dropdown size="small" @command="handleLibraryCommand">
						<span class="iconfont icon-sw-more-vertical"></span>
						<el-dropdown-menu slot="dropdown">
							<template v-if="item.createId === userInfo.id">
								<el-dropdown-item :command="commandObject('edit', item)" icon="el-icon-edit">编辑</el-dropdown-item>
								<el-dropdown-item :command="commandObject('rename', item)" icon="el-icon-edit-outline">重命名</el-dropdown-item>
								<el-dropdown-item :command="commandObject('download', item)" icon="el-icon-download">下载</el-dropdown-item>
								<el-dropdown-item :command="commandObject('delete', item)" icon="el-icon-delete">删除</el-dropdown-item>
							</template>
							<template v-else>
								<el-dropdown-item :command="commandObject('detail', item)" icon="el-icon-view">查看</el-dropdown-item>
							</template>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
import libraryMixin from '../mixins/library';
export default {
	mixins: [libraryMixin],
	data() {
		return {
			responsive: 4
		};
	},
	mounted() {
		this.dynamicUpdateColumn();
		window.addEventListener('resize', () => {
			this.dynamicUpdateColumn();
		});
	},
	methods: {
		//动态列数
		dynamicUpdateColumn() {
			let width = document.body.clientWidth;
			if(width >= 1680) {
				this.responsive = 4;
			} else if(width >= 1440) {
				this.responsive = 5;
			} else {
				this.responsive = 6;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.library_block_list {
	.el-col {
		margin-top: 16px;
	}

	.el-col-5 {
		width: 20%;
	}

	.el-col-4:nth-child(1),
	.el-col-4:nth-child(2),
	.el-col-4:nth-child(3),
	.el-col-4:nth-child(4),
	.el-col-4:nth-child(5),
	.el-col-4:nth-child(6),
	.el-col-5:nth-child(1),
	.el-col-5:nth-child(2),
	.el-col-5:nth-child(3),
	.el-col-5:nth-child(4),
	.el-col-5:nth-child(5),
	.el-col-6:nth-child(1),
	.el-col-6:nth-child(2),
	.el-col-6:nth-child(3),
	.el-col-6:nth-child(4) {
		margin-top: 0;
	}

	.item {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	.img {
		position: relative;
		padding-top: 56.25%;
		cursor: pointer;

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}

		img.cover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 1;
		}

		span {
			position: absolute;
			top: 50%;
			left: 15px;
			right: 15px;
			height: 48px;
			margin-top: -24px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			z-index: 3;
		}

		p.avatar {
			position: absolute;
			bottom: 6px;
			left: 6px;
			display: flex;
			align-items: center;
			z-index: 3;
			color: #fff;

			img {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				object-fit: cover;
				margin-right: 6px;
			}
		}
	}

	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8px;
		border-top: none;
		border: solid 1px #eef1f5;

		span.icon-general-log {
			color: #666;

			&::before {
				color: #777;
				margin-right: 6px;
			}
		}

		span.icon-sw-more-vertical {
			cursor: pointer;
		}
	}
}
</style>